<template>
    <div>
        <el-upload v-if="!url" v-model="url" :action="uploadUrl" :data="uploadData" :headers="headerData" :multiple="false"
            :show-file-list="false" :limit="1" :on-success="handleSuccess" list-type="picture-card"
            class="relative overflow-hidden rounded lv-upload-box" @mouseenter="hoverShow = true"
            @mouseleave="hoverShow = false" ref="uploadRef">
            <template #default>
                <el-icon>
                    <Plus />
                </el-icon>
            </template>
        </el-upload>
        <div v-else>
            <video width="320" height="240" controls>
                <source :src="url" type="video/mp4">
                您的浏览器不支持 video 标签。
            </video>
        </div>
        <div class="text-xs mt-1 text-[#595959]">
            <span class="text-[#F53F3F] text-sm" v-if="required">*</span>{{ info }}
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Delete, Plus, ZoomIn } from '@element-plus/icons-vue'
import { getToken } from '@/utils/store';
const url = defineModel<string>()
const props = defineProps<{ info?: string; required?: boolean }>()
const uploadUrl = import.meta.env.SYSTEM_BASE_API + '/file/file' // 图片上传地址
const uploadData = {
    // 上传图片携带参数 地址 + 后端对应的服务名
    path: 'movies'
}
const headerData = {
    satoken: getToken()
}
const uploadRef = ref()
const showPreview = ref(false)
const hoverShow = ref(false)
const handlePictureCardPreview = () => {
    showPreview.value = true
}
const handleRemove = () => {
    url.value = ''
    uploadRef.value?.clearFiles()
}
const handleSuccess = (response: any) => {
    console.log(response);

    if (response.code === 0) {
        url.value = response.data
    }
}
</script>

<style lang="scss">
.lv-upload-box {
    .el-upload-list--picture-card {
        --el-upload-list-picture-card-size: 106px !important;
        --el-upload-picture-card-size: 106px !important;
    }

    .el-upload--picture-card {
        --el-upload-list-picture-card-size: 106px !important;
        --el-upload-picture-card-size: 106px !important;
    }
}
</style>
